<template lang="pug">
  .foot-menu(ref="footWrap", v-if="getMenuStatus", :class="{'animated bounceInUp': getMenuStatus}")
    Scene
    div.clearfix.mt20
      //- :class="(getThemeId == 2) ? 'center tac' : 'fl'"
      ul.foot-menu-list.menu-custom.fl(v-if='getBottomMenu')
        el-tooltip(
          effect="dark",
          :content="item.title",
          placement="top",
          v-for="(item, index) in getBottomMenu",
          :key="index",
          @click.native="handleBtMenu(item)")
          li.menu-item.omit
            span.menu-icon(:style="getBgColorStyle")
              i.iconfont(:class="item.icon", :style="getColorStyle")
            p.menu-text.omit(:style="getColorStyle") {{item.title}}

      ul.foot-menu-list.menu-system.fr
        //- (v-if="getThemeId != 2")
        el-tooltip(
          effect="dark",
          placement="top",
          v-for="(item, index) in getMenuList",
          :key="index",
          :content="item.isActive ? item.act_title : item.dis_title",
          @click.native="handleSytemMenuItem(item, index)")
          li.menu-item.omit
            span.menu-icon(:style="getBgColorStyle")
              i.iconfont(v-show="item.isActive", :class="item.active_icon", :style="getColorStyle")
              i.iconfont(v-show="!item.isActive", :class="item.icon", :style="getColorStyle")
            p.menu-text.omit(:style="getColorStyle") {{item.type_id === 'praise'? getPraiseCount : item.title}}
</template>

<script>
import Scene from 'Comps/Scene/pc/scenec'
import themeMixin from '@/mixins/theme'
import menuMixin from '@/mixins/menu'
import { mapGetters } from 'vuex'
import {
  filterMenu
} from '@/utils/menu'

export default {
  name: 'menuBar',
  mixins: [themeMixin, menuMixin],
  components: {
    Scene
  },
  async mounted() {
    this.menuDataList = await filterMenu(this.$CONFIG.pcDefMenu)
  },
  computed: {
    ...mapGetters([
      'praiseCount'
    ]),
    getPraiseCount() {
      return this.praiseCount > this.countUnit
        ? Number(this.praiseCount/this.countUnit).toFixed(1) + 'w'
        : this.praiseCount
          ? this.praiseCount
          : 0
    },
    getMenuList() {
      // console.log(this.menuDataList)
      return this.menuDataList
    }
  }
}
</script>

<style lang="stylus">
$white = #fff
$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff
.foot-menu
  .foot-menu-list
    box-sizing: border-box
    color: #fff
    .menu-item
      width: 60px
      display: inline-block
      text-align: center
      cursor: pointer
      .menu-text
        font-size: 12px
        margin-top: 5px
      .menu-icon
        display: inline-block
        width: 30px
        height: 30px
        line-height: 30px
        border-radius: 50%
        transition: all 1s
        background: $white
        i
          color: $theme-classic-color
          vertical-align: middle

</style>
